<template>
  <div class="main">
    <PureTableBar title="用户画像列表" style="height:50%">
      <template #buttons>
        <el-button type="primary" @click="createTaskVisible = true"> 创建任务 </el-button>
        <el-button type="primary" @click="addChart"> 添加画像 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          ref="tableRef" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          highlight-current-row @row-click="onRowClick" @current-change="handleCurrentChange" max-height="350px"
          @size-change="handleSizeChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="checkPor(row)">
              查看画像
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <PureTableBar title="实时数据" style="height:45%" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          ref="tableRef" :data="dataList2" :columns="columns2" :checkList="checkList" :pagination="pagination2"
          highlight-current-row @current-change="handleCurrentChange2" @size-change="handleSizeChange2" max-height="300px"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 创建任务弹窗 -->
    <ReDialog :width="1000" :height="500" :models="createTaskVisible" @Closes="cancelCreate()">
      <template #header>
        <h2 style="text-align: center;">创建任务</h2>
      </template>
      <template #main>
        <el-scrollbar height="420px">
          <el-form label-position="right" style="width: 80%; margin: 0 auto" label-width="120" :model="formData">
            <el-form-item label="任务名称：" prop="taskTittle">
              <el-input v-model.trim="formData.taskTittle" style="width: 70%" />
            </el-form-item>
            <el-form-item label="客群名称：" prop="customerName">
              <el-input v-model.trim="formData.customerName" style="width: 70%" />
            </el-form-item>
            <el-form-item label="体系名称：" prop="portraitIndexSystemId">
              <el-select v-model="formData.portraitIndexSystemId" placeholder="请选择" clearable style="width: 70%">
                <el-option v-for="item in selectData.indexSystemList" :key="item.selectId" :label="item.selectName"
                  :value="item.selectId" />
              </el-select>
            </el-form-item>
            <div style="width: 100%;padding:0 4%">
              <ScreenPerson v-if="createTaskVisible" />
            </div>
          </el-form>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveCreate()" type="primary" :loading="BtnLoading"> 保存 </el-button>
          <el-button @click="cancelCreate()"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
    <!-- 添加画像弹窗 -->
    <ReDialog :width="600" :height="400" :models="addProVisible" @Closes="cancelAddChart()">
      <template #header>
        <h2 style="text-align: center;">添加画像</h2>
      </template>
      <template #main>
        <el-form label-width="90" label-position="left" style="width: 70%; margin: 0 auto" ref="ruleFormRef"
          :model="chartFormData" status-icon>
          <el-form-item label="任务名称：">
            <el-input v-model.trim="taskTitlt" disabled />
          </el-form-item>
          <el-form-item label="客群名称：">
            <el-input v-model.trim="customerName" disabled />
          </el-form-item>
          <el-form-item label="图表名称:" prop="chartName">
            <el-input v-model.trim="chartFormData.chartName" />
          </el-form-item>
          <el-form-item label="图表类型:" prop="chartType">
            <el-select v-model="chartFormData.chartType" style="width: 100%">
              <el-option v-for="type in selectData.chartList" :key="type.selectId" :label="type.selectName"
                :value="type.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="维度:" prop="dimension" v-if="chartFormData.chartType !== '7'">
            <el-select v-model="chartFormData.dimension" style="width: 100%">
              <el-option v-for="r in selectData.dimensionList" :key="r.selectId" :label="r.selectName"
                :value="r.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="指标:" prop="index" v-if="chartFormData.chartType != '7'">
            <el-select v-model="chartFormData.indexStr" style="width: 100%" :multiple="true">
              <el-option v-for="r in selectData.indexList" :key="r.selectId" :label="r.selectName" :value="r.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="统计规则:" prop="dimension" v-if="chartFormData.chartType == '7'">
            <el-select v-model="chartFormData.countDataType" style="width: 100%">
              <el-option v-for="r in  selectData.fullSysList" :key="r.selectId" :label="r.selectName"
                :value="r.selectId" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveNewChart()" :loading="BtnLoading"> 确定 </el-button>
          <el-button @click="cancelAddChart()"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
    <div class="show_Echar" v-if="tLoding">
      <div class="close-icon " @click="handleCancelShowChart()"></div>
      <div v-for="echest in echartesnum" :key="echest" style="margin-bottom:100px">
        <p class="echartstitle">{{ echest.title }}</p>
        <div :id="echest.data" class="echartes"></div>
      </div>
    </div>

  </div>
</template>
<script setup lang='ts'>
import { usePortrait } from "./hook/userPortrait";
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenPerson from "@/components/Screen-bank/index.vue"
import { ref } from "vue";
const ruleFormRef = ref();
const {
  columns,
  tableRef,
  loading,
  dataList,
  dataList2,
  pagination,
  createTaskVisible,
  addProVisible,
  formData,
  pagination2,
  columns2,
  selectData,
  taskTitlt,
  customerName,
  chartFormData,
  saveNewChart,
  tLoding,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChange2,
  handleCurrentChange2,
  checkPor,
  onRowClick,
  addChart,
  cancelAddChart,
  chartList,
  echartesnum,
  handleCancelShowChart,
  cancelCreate,
  saveCreate,
  BtnLoading
} = usePortrait()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.main {
  position: relative;
}

.show_Echar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: white;
  top: 0;
  z-index: 10;
  overflow: scroll;

  ._Echar_colse {
    position: absolute;
    right: 20px;
    top: 20px;

  }

  .echartes {
    width: 91%;
    height: 400px;
    margin: auto;
  }

  .echartstitle {
    text-align: center;
    font-size: 12px;
    padding: 10px 0;
    margin: 15px 0;
  }

  .close-icon {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    right: 20px;
  }

  .close-icon::before,
  .close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 10px;
    background-color: red;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .close-icon::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
</style>
